<template>
	<view class="page-container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<x-status-bar></x-status-bar>
			<view class="flex-center-between header-navbar">
				<x-back-btn></x-back-btn>
				<view class="u-f-40 common-title">
					{{ lang_shop[type + 'ServiceMessage'] }}
				</view>
				<view class="u-f-28 u-lh-40 font-medio" @click="completeAction">{{ lang_common.complete }}</view>
			</view>

			<!-- 分割线 -->
			<u-gap height="1" bgColor="rgba(0, 0, 0, 0.07)"></u-gap>
		</view>

		<!-- 列表 -->
		<view>
			<view style="padding: 10rpx 34rpx;">
				<view class="card-box u-m-t-10">
					<view class="u-f-32 u-lh-44 font-medio">{{ lang_shop.serviceName }}</view>
					<view class="u-m-t-8">
						<input v-model="form.title" :placeholder="lang_shop.serviceNameTips" maxlength="15" />
					</view>
				</view>

				<view class="card-box u-m-t-10">
					<view class="u-f-32 u-lh-44 font-medio">{{ lang_shop.servicePrice }}</view>
					<view class="u-m-t-8">
						<input v-model="form.price" type="number" :placeholder="lang_shop.servicePriceTips" />
					</view>
				</view>

				<view class="card-box u-m-t-10">
					<view class="u-f-32 u-lh-44 font-medio">{{ lang_shop.serviceCover }}</view>
					<view class="u-m-t-8">
						<x-upload v-model="form.imgUrl" :file-count="1" imgcut @fail="settingValue = 'camera'"></x-upload>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 留空 -->
		<view style="height: 200rpx"></view>
		<permission-unAuthTips v-model="settingValue"></permission-unAuthTips>
	</view>
</template>

<script>
	import {
		merchantServiceAdd,
		merchantServiceUpdate
	} from '@/api/merchant/service.js'
	export default {
		data() {
			return {
				form: {},
				type: 'add',
				serviceId: '',
				
				isClick: false,
				settingValue: ''
			}
		},
		// 获取类型
		onLoad({
			serviceId,
			type
		}) {
			this.type = type || 'add'
			this.form.serviceId = serviceId
			let event = this.getOpenerEventChannel()
			event.on('shop-service-page', e => {
				let { title, price, imgUrl } = e
				this.form = {
					title, price, imgUrl, serviceId, 
				}
			})
		},
		methods: {
			// 右上角表单按钮点击后触发
			completeAction() {
				let keys = [{
						key: 'title',
						tipsKey: 'serviceNameTips'
					},
					{
						key: 'price',
						tipsKey: 'servicePriceTips'
					},
					{
						key: 'imgUrl',
						tipsKey: 'serviceCoverTips'
					},
				]
				for (let i = 0, len = keys.length; i < len; i++) {
					let {
						key,
						tipsKey
					} = keys[i]
					if (!this.form[key]) return this.$api.msg(this.lang_shop[tipsKey])
				}
				if (this.isClick) return;
				this.isClick = true
				
				let queryFn = fn => fn(this.form).then(() => {
					uni.$emit('update-shop-serive-list')
					this.$api.msg('提交成功')
					let timer = setTimeout(() => {
						this.isClick = false
						this.jumpBack()
					}, 1000)
				}).catch(() => {
					this.isClick = false
				})
				queryFn(this.type === 'add' ? merchantServiceAdd : merchantServiceUpdate)
			}
		}
	}
</script>

<style scoped lang="scss">
	.card {
		&-box {
			padding: 20rpx 24rpx;
			border-radius: 4rpx;
			background-color: #FFFFFF;
		}
	}

	.file {
		&-box {
			position: relative;
			width: 200rpx;
			height: 200rpx;
			background-color: #f9f9f9;
			border-radius: 34rpx;
		}

		&-close {
			position: absolute;
			top: 0;
			right: 0;
		}
	}
</style>
